<template>
  <div>
    <el-dialog title="修改密码" v-model="visible">
      <el-form :model="tableForm" ref="tableFormRef" :rules="tableRules">
        <el-form-item
          label="原密码"
          :label-width="formLabelWidth"
          prop="password"
        >
          <el-input
            v-model="tableForm.password"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="新密码"
          :label-width="formLabelWidth"
          prop="password1"
        >
          <el-input
            v-model="tableForm.password1"
            placeholder="请输入密码"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          :label-width="formLabelWidth"
          prop="password2"
        >
          <el-input
            v-model="tableForm.password2"
            placeholder="请再输入一遍密码"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="resetHandler">重 置</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, nextTick } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { setPassword } from "@/api/user";
import router from "@/router";

// props声明
const props = defineProps({
  dialogTableVisible: Boolean,
});

// emits声明
const emit = defineEmits(["update:dialogTableVisible"]);

const route = useRoute();
const store = useStore();

const tableFormRef = ref(null);
const formLabelWidth = ref("80px");

const tableForm = reactive({
  password: "",
  password1: "",
  password2: "",
});

const validatePassword = (rule, value, callback) => {
  if (tableForm.password2 === "") {
    callback(new Error("新密码必须填写！"));
  } else if (tableForm.password1 !== tableForm.password2) {
    callback(new Error("两次输入的密码不对！"));
  } else if (tableForm.password1.length < 6) {
    callback(new Error("密码位数不得小于6！"));
  } else {
    callback();
  }
};

const tableRules = reactive({
  password: [{ required: true, message: "原密码必须填写！", trigger: "blur" }],
  password1: [{ required: true, message: "新密码必须填写！", trigger: "blur" }],
  password2: [{ required: true, trigger: "blur", validator: validatePassword }],
});

const visible = computed({
  get: () => props.dialogTableVisible,
  set: (value) => {
    emit("update:dialogTableVisible", {
      type: "setPassword",
      val: value,
    });
  },
});

const resetHandler = () => {
  tableFormRef.value.resetFields();
};

const submit = () => {
  tableFormRef.value.validate((valid) => {
    if (valid) {
      const data = {
        oldPassword: tableForm.password,
        newPassword: tableForm.password1,
      };

      setPassword(data).then(() => {
        ElMessage({
          message: "密码修改成功",
          type: "success",
        });

        Object.assign(tableForm, {
          password: "",
          password1: "",
          password2: "",
        });
        setTimeout(() => {
          store.dispatch("user/logout").then(() => {
            router.push(`/login?redirect=${route.fullPath}`);
          });
        }, 1000);
      });
    } else {
      console.log("error submit!!");
    }
  });
};
</script>

<style scoped>
.show-pwd {
  position: absolute;
  right: 10px;
  top: 7px;
  font-size: 16px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}

/* 移除输入框自动填充时的黄色背景 */
:deep(input:-webkit-autofill),
:deep(input:-webkit-autofill:hover),
:deep(input:-webkit-autofill:focus),
:deep(input:-webkit-autofill:active) {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
  -webkit-text-fill-color: #000;
}
</style>
